<template>
  <button @click="getCaptcha">验证码</button>
  <div id="captcha-box"></div>
  <button @click="login">登录</button>
</template>

<script setup>
import { ref } from 'vue';

const id = ref('');
// config 对象为TAC验证码的一些配置和验证的回调
const config = {
  // 生成接口 (必填项)
  requestCaptchaDataUrl: "/api/gen",
  // 验证接口 (必填项)
  validCaptchaUrl: "/api/check",
  // 验证码绑定的div块 (必填项)
  bindEl: "#captcha-box",
  // 验证成功回调函数(必填项)
  validSuccess: (res, c, tac) => {
    // 销毁验证码服务
    tac.destroyWindow();
    console.log("验证成功，后端返回的id为", res.data.id);
    id.value = res.data.id;
  },
  // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
  validFail: (res, c, tac) => {
    console.log("验证码验证失败回调...")
    // 验证失败后重新拉取验证码
    tac.reloadCaptcha();
  },
  // 刷新按钮回调事件
  btnRefreshFun: (el, tac) => {
    console.log("刷新按钮触发事件...")
    tac.reloadCaptcha();
  },
  // 关闭按钮回调事件
  btnCloseFun: (el, tac) => {
    console.log("关闭按钮触发事件...")
    tac.destroyWindow();
  }
}
// 样式配置
const style = {
  // 按钮样式
  btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
  // 背景样式
  bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
  // logo地址
  logoUrl: "https://minio.tianai.cloud/public/static/captcha/images/logo.png",
  // 滑动边框样式
  moveTrackMaskBgColor: "#f7b645",
  moveTrackMaskBorderColor: "#ef9c0d"
}

const login = async (id) => {
  try {
    const response = await fetch(`/api/check2?id=${encodeURIComponent(id)}`);
    if (response.ok) {
      alert("登录成功");
    } else {
      alert("登录失败");
    }
  } catch (error) {
    console.error("请求出错:", error);
    alert("登录失败");
  }
}


const getCaptcha = () => {

  // 参数1 为 tac文件是目录地址，目录里包含 tac的js和css等文件
  // 参数2 为 tac验证码相关配置
  // 参数3 为 tac窗口一些样式配置
  window.initTAC("./tac", config, style).then(tac => {
    tac.init(); // 调用init则显示验证码
  }).catch(e => {
    console.log("初始化tac失败", e);
  })
}
</script>
<style scoped>
</style>
